<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-27 06:44:00
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:34:31
 * @FilePath: /banban/pages/setting/userInfo.vue
 * @Description: 用户信息注册/修改页面
-->
<template>
    <view class="user-info-page" :style="`padding-top: ${statusBarHeight}px`">
        <view class="top-header">
            <view class="cancel" @click="navBack">取消</view>
            <view class="title">{{ pageType === 'register' ? '注册' : '修改信息' }}</view>
            <view style="opacity: 0">取消</view>
        </view>

        <view class="form-container">
            <!-- 手机号 -->
            <view v-if="pageType === 'register'" class="form-item">
                <view class="form-label">手机号<text class="required">*</text></view>
                <view class="form-input">
                    <!-- :v-if="pageType === 'edit'" -->
                    <uni-easyinput
                        v-model="formData.phone" 
                        type="number"
                        placeholder="请输入手机号"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                    />
                </view>
            </view>
            
            <!-- 昵称 -->
            <view class="form-item">
                <view class="form-label">昵称<text class="required">*</text></view>
                <view class="form-input">
                    <uni-easyinput 
                        v-model="formData.nickName" 
                        placeholder="请输入昵称"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                    />
                </view>
            </view>
            
            <!-- 真实姓名 -->
            <view class="form-item">
                <view class="form-label">真实姓名<text class="required">*</text></view>
                <view class="form-input">
                    <uni-easyinput 
                        v-model="formData.realName" 
                        placeholder="请输入真实姓名"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                    />
                </view>
            </view>
            
            <!-- 性别 -->
            <view class="form-item">
                <view class="form-label">性别</view>
                <view class="form-input">
                    <uni-data-checkbox
                        v-model="formData.sex"
                        :localdata="sexOptions"
                        mode="button"
                    />
                </view>
            </view>
            
            <!-- 身份证号 -->
            <view class="form-item">
                <view class="form-label">身份证号</view>
                <view class="form-input">
                    <uni-easyinput 
                        v-model="formData.idCard" 
                        placeholder="请输入身份证号"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                    />
                </view>
            </view>

            <!-- 邮箱 -->
            <!-- <view class="form-item">
                <view class="form-label">邮箱</view>
                <view class="form-input">
                    <uni-easyinput 
                        v-model="formData.email" 
                        placeholder="请输入邮箱"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                    />
                </view>
            </view> -->
            
            <!-- 住址 -->
            <view class="form-item">
                <view class="form-label">住址</view>
                <view class="form-input">
                    <uni-easyinput 
                        type="textarea"
                        v-model="formData.address" 
                        placeholder="请输入住址"
                        :inputBorder="false"
                        primaryColor="#5d5fef"
                        :placeholderStyle="placeholderStyle"
                        style="text-indent: 11px;"
                    />
                </view>
            </view>
        </view>

        <!-- 保存按钮 -->
        <view class="primary-button" @click="handleSave">{{ pageType === 'register' ? '注册' : '保存' }}</view>
    </view>
</template>

<script setup>
import { register, getUserInfo as getUserInfoApi, updateUserInfo } from '@/api/user'
import { ref, reactive, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import store from '@/store/index.js';
import { toast } from '@/utils/common'

const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight);

// 表单数据
const formData = reactive({
    phone: '',
    nickName: '',
    realName: '',
    sex: 2,
    idCard: '',
    address: '',
    email: '',
    createWhere: '2'
});

// 表单占位符样式
const placeholderStyle = ref("font-size:14px; color:#a6a6a6;");

// 性别选项
const sexOptions = ref([
    { text: '女', value: 2 },
    { text: '男', value: 1 }
]);

// 页面类型 (register 注册 / edit 修改)
const pageType = ref('edit');

// 获取页面类型参数
onLoad((option) => {
    if (option.type === 'register') {
        pageType.value = 'register';
        formData.phone = option.phone
    } else {
        pageType.value = 'edit';
        // 如果是修改信息，尝试获取用户现有信息
        getUserInfo();
    }
});

// 获取用户信息
const getUserInfo = async () => {
    try {
        const res = await getUserInfoApi({});
        if (res.code === 0) {
            Object.assign(formData, res.data);
        }
    } catch (error) {
        console.error('获取用户信息失败', error);
        toast({
            title: '获取用户信息失败',
            icon: 'none'
        });
    } finally {
        uni.hideLoading()
    }
};

// 表单验证
const validateForm = () => {
    if (!formData.phone) {
        toast({
            title: '请输入手机号',
            icon: 'none'
        });
        return false;
    }
    
    // 手机号验证
    const phonePattern = /^1[3-9]\d{9}$/;
    if (!phonePattern.test(formData.phone)) {
        toast({
            title: '手机号格式不正确',
            icon: 'none'
        });
        return false;
    }
    
    if (!formData.nickName) {
        toast({
            title: '请输入昵称',
            icon: 'none'
        });
        return false;
    }
    
    if (!formData.realName) {
        toast({
            title: '请输入真实姓名',
            icon: 'none'
        });
        return false;
    }
    
    // 身份证号验证（如果填写了）
    if (formData.idCard) {
        const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!idCardPattern.test(formData.idCard)) {
            toast({
                title: '身份证号格式不正确',
                icon: 'none'
            });
            return false;
        }
    }
    
    return true;
};

// 保存用户信息
const handleSave = async () => {
    if (!validateForm()) return;
    
    try {
        const saveUserInfoAPI = pageType.value === 'register' ? register : updateUserInfo
        const { code, msg } = await saveUserInfoAPI(formData);

        if (code === 0) {
            // 保存成功
            toast({
                title: pageType.value === 'register' ? '注册成功' : '保存成功',
                icon: 'success'
            }, () => {
                pageType.value === 'register' ? uni.redirectTo({ url: '/pages/home/index' }) : navBack()
            });
        } else {
            toast({
                title: msg,
                icon: 'none'
            });
        }
        
    } catch (error) {
        toast({
            title: pageType.value === 'register' ? '注册失败，请重试' : '保存失败，请重试',
            icon: 'none'
        });
    }
};

// 返回上一页
const navBack = () => {
    uni.navigateBack();
};
</script>

<style lang="scss">
.user-info-page {
    box-sizing: border-box;
    
    .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 10px;
        border-bottom: 1px solid #e4e4e499;
        box-sizing: border-box;
        margin-bottom: 15px;
        
        .cancel {
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0px;
            line-height: 20px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
            vertical-align: top;
        }

        .title {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 22px;
            color: rgba(21, 21, 34, 1);
            text-align: center;
            vertical-align: top;
        }
    }
    
    .form-container {
        padding: 0 15px;
        
        .form-item {
            display: flex;
            padding: 15px 0;
            border-bottom: 1px solid #e4e4e499;
            
            .form-label {
                width: 100px;
                font-size: 15px;
                font-weight: 400;
                color: #333;
                line-height: 38px;
                
                .required {
                    color: #ff4d4f;
                    margin-left: 2px;
                }
            }
            
            .form-input {
                flex: 1;
                
                /* 移除输入框边框 */
                .uni-easyinput__content {
                    border: none !important;
                }
                
                /* 设置data-checkbox样式 */
                .uni-data-checklist {
                    .checklist-button {
                        padding: 5px 14px;
                        border-color: #e4e4e4;
                        
                        &.is-checked {
                            background-color: #5d5fef;
                            border-color: #5d5fef;
                        }
                    }
                }
            }
        }
    }
    
    .primary-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 50px);
        height: 48px;
        margin: 40px auto;
        opacity: 1;
        border-radius: 8.02px;
        background: #5d5fef;
        box-shadow: 0px 0px 0px 6.42px rgba(255, 255, 255, 0.15);

        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21.1px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }
}
</style>
